{% extends 'base.html' %}
{% load static blog_extra %}
{% block title %}{{ object.title }}{% endblock %}
{% block header_file %}
    <meta name="keywords" content="{{ object.title }}">
    <meta name="description" content="{{ object.desc }}">
    <link rel="stylesheet" href="{% static 'css/blog.min.css' %}"/>
    <link rel="stylesheet" href="{% static 'css/read.min.css' %}"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor@3.7.5/dist/js/highlight.js/styles/github.css">
    <script src="https://cdn.jsdelivr.net/npm/vditor@3.7.5/dist/js/highlight.js/highlight.pack.js"></script>
    <script> hljs.initHighlightingOnLoad();</script>
{% endblock %}
{% block base_content %}
    <div class="col-content" style="width: 100%">
        <div class="inner">
            <article class="article-list">
                <section class="article-item">
                    <aside class="title" style="line-height: 1.5">
                        <h4>{{ object.title }}</h4>
                        <p class="fc-grey fs-14">
                            <small>
                                作者：<a href="javascript:;" class="fc-link">{{ object.get_owner }}</a>
                            </small>
                            <small class="ml10">点赞：<i class="upcount">{{ object.up_count }}</i></small>
                            <small class="ml10">围观：<i class="readcount">{{ object.view_count }}</i></small>
                            <small class="ml10">评论：<i class="commentcount">{{ object.comment_count }}</i></small>
                            <small class="ml10">更新于 <label>{{ object.get_datetime }}</label></small>
                        </p>
                    </aside>
                    <div class="time mt10" style="padding-bottom: 0">
                        <span class="day">{{ object.get_day }}</span>
                        <span class="month fs-18">{{ object.get_month }}<small class="fs-14">月</small></span>
                        <span class="year fs-18">{{ object.get_year }}</span>
                    </div>
                    <div class="content artiledetail vditor-reset"
                         style="border-bottom: 1px solid #e1e2e0; padding-bottom: 20px">
                        {{ object.content|safe }}
                        <div class="copyright mt20">
                            <p class="f-toe fc-black">
                                非特殊说明，本文版权归本站所有，转载请注明出处.
                            </p>
                            <p class="f-toe">
                                本文标题：
                                <a href="javascript:;" class="r-title">{{ object.title }}</a>
                            </p>
                            <p class="f-toe">
                                本文网址：
                                <a href="{% site_url request %}">{% site_url request %}</a>
                            </p>
                        </div>
                        <div id="aplayer" style="margin: 5px 0"></div>
                        <h6>延伸阅读</h6>
                        <ol class="b-relation">
                            {% for article in object.get_related_articles %}
                                <li class="f-toe"><a href="{{ article.get_absolute_url }}">{{ article.title }}</a></li>
                            {% empty %}
                                <li class="f-toe"><a href="javascript:;">没有了...</a></li>
                            {% endfor %}
                        </ol>
                    </div>
                    <div class="bdsharebuttonbox share bdshare-button-style0-32"
                         data-tag="share_1">
                        <ul>
                            <li class="f-praise">
                                <span><a class="s-praise"></a></span>
                            </li>
                        </ul>
                    </div>
                    <div class="f-cb"></div>
                    <div class="mt20 f-fwn fs-24 fc-grey comment"
                         style="border-top: 1px solid #e1e2e0; padding-top: 20px"></div>
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>发表评论</legend>
                        <div class="layui-field-box">
                            <div class="leavemessage" style="text-align: initial">
                                {% csrf_token %}
                                <form class="layui-form blog-editor" action="">
                                    <div class="layui-form-item">
                                        <input type="hidden" value="{{ object.pk }}" name="article">
                                        <textarea name="content" lay-verify="content" id="remarkEditor"
                                                  placeholder="请输入内容" class="layui-textarea layui-hide"></textarea>
                                    </div>
                                    <div class="layui-form-item">
                                        <button class="layui-btn layui-btn-sm" lay-submit lay-filter="form">
                                            提交留言
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </fieldset>
                    <ul class="blog-comment" id="blog-comment" data-page-count="{{ page_count }}">

                    </ul>
                </section>
            </article>
        </div>
    </div>
{% endblock %}
{% block footer_file %}
    <script>
        var article = {
            pid: '{{ object.pk }}',
            title: '{{ object.title }}',
            time: '{{ object.update_time }}',
        }
    </script>
    <script src="{% static 'js/comment.min.js' %}"></script>

{% endblock %}